<template>
	<view class="content">
		<div class="container" style="padding-bottom: 0;">
			<div class="ibox">
				<div class="c80 f14">累计充值金额（元）</div>
				<div class="mtb20" style="font-size: 28px;">{{num}}</div>
				<div class="btn" @click="vip">充值</div>
			</div>
			<div class="ibox">
				<div class="flexB ac" style="height: 40px;">
					<div class="flex ac c80" @click="getTime(1)"><uni-icons type="left" size="14" color="#808080"></uni-icons>上一月</div>
					<div>{{ date }}</div>
					<div class="flex ac c80" @click="getTime(2)">下一月<uni-icons type="right" size="14" color="#808080"></uni-icons></div>
				</div>
				<div style="height: 460px; overflow: auto;">
					<div class="flexB ii" v-for="i in list" :key="i.id">
						<div style="color: #2C313B;">
							<!-- <uni-icons type="checkbox" size="16" color="##2C313B"></uni-icons> -->
							{{ i.createTime }}
						</div>
						<div class="theme">+{{ i.price }}</div>
					</div>
					<view v-if="!list.length" class="kong">暂无数据</view>
					<view v-else class="last">没有更多了</view>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			date: '',
			num: 0,
			y: new Date().getFullYear(),
			m: new Date().getMonth()+1,
			list: []
		}
	},
	onLoad() {
		this.date = this.y+'-'+(this.m+'').padStart(2, '0');
		this.getList()
		this.$request({
				url: '/wx/user/totalRecharge',
				method: 'get',
			}).then(res=>{
				this.num = res.data;
			});
	},
	methods: {
		getTime(n) {
			if(n==1) { //del
				if(this.m==1) {
					this.y -= 1;
					this.m = 12;
				} else {
					this.m -= 1;
				}
			} else { //add
				if(this.m==12) {
					this.y += 1;
					this.m = 1;
				} else {
					this.m += 1;
				}
			}
			this.date = this.y+'-'+(this.m+'').padStart(2, '0');
			this.getList();
		},
		getList() {
			this.$request({
				url: '/wx/user/rechargeRecord',
				method: 'get',
				data: {
					date: this.date,
					pageNum: 1,
					pageSize: 1000,
				}
			}).then(res=>{
				this.list = res.data.list || []
			})
		},
		vip() {
			uni.navigateTo({
				url: `/pages/vip`
			});
		},

	}
}
</script>

<style lang="scss">
.btn {
	text-align: center;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: $theme;
	color: #fff;
}
.ii {
	font-size: 28rpx;
	padding: 14px 8px;
	border-bottom: 1rpx solid #f1f1f1;
}
.content {
	height: 100%;
	background: linear-gradient(180deg, #2E5BCC 0%, rgba(255, 255, 255, 1) 30%);
}
</style>